<template>
  <a-modal
    :visible="visible"
    title=""
    centered
    @cancel="onClose"
    :width="600"
    :footer="null"
  >
    <div
      style="
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20px;
      "
    >
      对话记录
    </div>
    <div class="list-wrap beauty-scroller-bar">
      <div
        v-for="(item, index) of list"
        :key="index"
        class="item-card"
        @click="useChat(item)"
      >
        <div class="item-title">{{ item.title }}</div>
        <DeleteOutlined
          style="color: #ff7875; margin-left: 10px"
          @click.stop="deleteChat(item)"
        />
      </div>
    </div>
    <div class="clear-button-wrap">
      <a-button type="link" @click="clearChatList">清除所有对话</a-button>
    </div>
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  ref,
  nextTick,
  createVNode,
} from "vue";
import request from "../../common/utils/request";
import store from "../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import {
  ExclamationCircleOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";
export default defineComponent({
  name: "PromptsSearch",
  components: { DeleteOutlined },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },

  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      list: [],
    });

    const getList = (checkFirst) => {
      request.get("/work_ai", "/chat/list", {}).then((res) => {
        if (res.list) {
          state.list = res.list;
          context.emit("getHistoryLength", res.list.length);
          if (checkFirst) {
            state.currentChat = res.list[0];
          }
        }
      });
    };

    const init = () => {
      if (store.getters.isLogin) {
        getList();
      }
    };

    init();

    const useChat = (item) => {
      state.currentChat = item;
      context.emit("useChat", item);
    };

    const deleteChat = (item) => {
      request
        .del("/work_ai", "/chat/delete", { chat_id: item.chat_id })
        .then((res) => {
          context.emit("historyDelete", item);
          message.success("删除成功");
          getList();
        });
    };

    const clearChatList = () => {
      Modal.confirm({
        title: () => `确定要清除所有对话吗？`,
        icon: () => createVNode(ExclamationCircleOutlined),
        centered: true,
        onOk() {
          request.del("/work_ai", "/chat/clearTalk", {}).then((res) => {
            context.emit("historyDelete", null, true);
            message.success("清除成功");
            getList();
          });
        },
      });
    };

    const onClose = () => {
      context.emit("onClose");
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        }
      }
    );

    return {
      ...toRefs(state),
      useChat,
      deleteChat,
      clearChatList,
      onClose,
    };
  },
});
</script>

<style lang="less" scoped>
.list-wrap {
  width: 100%;
  height: 500px;
  overflow: hidden auto;

  .chat-history-button {
    position: absolute;
    top: 85px;
    left: -115px;
  }

  .item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 12px 20px;
    margin-bottom: 2px;
    border-radius: 8px;

    &:hover {
      background-color: #f7f0ff;
      color: @primary-color;
    }

    .item-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .item-card-current {
    background-color: #f7f0ff;
    color: @primary-color;
  }
}

.clear-button-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>
